<template>
  <div id="app">
    <ShuttleBox
      v-model="modelList"
      :dataList="dataList"
      :options="{
        label: 'name',
      }"
    >
      <template #searchL="scope">
        <ShuttleSearch @searchPage="scope?.searchPage" />
      </template>
      <template #searchR="scope">
        <ShuttleSearch @searchPage="scope?.searchPage" />
      </template>
      <template #default="scope">
        <span>{{ scope?.row.name }}</span>
        <span style="margin-left: 15px">{{ scope?.row.value }}</span>
        <span style="margin-left: 15px">{{ scope?.row.count }}</span>
      </template>
    </ShuttleBox>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import ShuttleBox from "./components/ShuttleBox/index.vue";
import ShuttleSearch from "./components/ShuttleBox/ShuttleSearch.vue";
export default defineComponent({
  name: "App",
  components: {
    ShuttleBox,
    ShuttleSearch,
  },
  setup() {
    const dataList = "abcdefghijklmnopqrstovwxyz".split("").map((m, i) => {
      return {
        name: "阿巴阿巴阿巴数据" + m,
        value: i,
        count: i + 1,
      };
    });
    const modelList = ref<number[]>([]);

    return {
      dataList,
      modelList,
    };
  },
});
</script>

<style>
#app {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
